

import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Input, Button, Statistic, Divider, Space } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import SearchCard from './components/SearchCard';
import ShopCard from './components/ShopCard';
import ProductList from './components/ProductList';

import { Line, TinyColumn, TinyLine, Column, TinyArea, Pie } from '@ant-design/charts';


const App = () => {

  const [data5, setData5] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);
  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
      .then((response) => response.json())
      .then((json) => setData5(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };

  var config5 = {
    data: data5,
    height: 400,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: { tickCount: 5 },
  };

  const tabList = [
    {
      key: 'tab1',
      tab: '销售额',
    }
  ];

  // const data = [
  //   { year: '1991', value: 3 },
  //   { year: '1992', value: 4 },
  //   { year: '1993', value: 3.5 },
  //   { year: '1994', value: 5 },
  //   { year: '1995', value: 4.9 },
  //   { year: '1996', value: 6 },
  //   { year: '1997', value: 7 },
  //   { year: '1998', value: 9 },
  //   { year: '1999', value: 13 },
  // ];

  // const config = {
  //   data,
  //   height: 400,
  //   xField: 'year',
  //   yField: 'value',
  //   point: {
  //     size: 5,
  //     shape: 'diamond',
  //   },
  // };


  var data1 = [274, 337, 81, 497, 666, 219, 269];
  var config1 = {
    height: 60,
    autoFit: true,
    data: data1,
    tooltip: {
      customContent: function customContent(x, data) {
        var _data$, _data$$data;
        return 'NO.'
          .concat(x, ': ')
          .concat(
            (_data$ = data[0]) === null || _data$ === void 0
              ? void 0
              : (_data$$data = _data$.data) === null || _data$$data === void 0
                ? void 0
                : _data$$data.y.toFixed(2),
          );
      },
    },
  };

  var data2 = [
    264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513, 546, 983, 340, 539,
    243, 226, 192,
  ];
  var config2 = {
    height: 60,
    autoFit: true,
    data: data2,
    smooth: true,
    areaStyle: {
      fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
    }
  };


  var data = [
    {
      type: '1月',
      sales: 38,
    },
    {
      type: '2月',
      sales: 52,
    },
    {
      type: '3月',
      sales: 61,
    },
    {
      type: '4月',
      sales: 145,
    },
    {
      type: '5月',
      sales: 48,
    },
    {
      type: '6月',
      sales: 38,
    },
    {
      type: '7月',
      sales: 38,
    },
    {
      type: '8月',
      sales: 38,
    },
    {
      type: '9月',
      sales: 645,
    },
    {
      type: '10月',
      sales: 38,
    },
    {
      type: '11月',
      sales: 788,
    },
    {
      type: '12月',
      sales: 110,
    },
  ];
  var config = {
    data: data,
    height: 300,
    xField: 'type',
    yField: 'sales',
    // label: {
    //   position: 'middle',
    //   style: {
    //     fill: '#FFFFFF',
    //     opacity: 0.6,
    //   },
    // },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: { alias: '类别' },
      sales: { alias: '销售额' },
    },
  };


  var data4 = [
    {
      type: '分类一',
      value: 27,
    },
    {
      type: '分类二',
      value: 25,
    },
    {
      type: '分类三',
      value: 18,
    },
    {
      type: '分类四',
      value: 15,
    },
    {
      type: '分类五',
      value: 10,
    },
    {
      type: '其他',
      value: 5,
    },
  ];
  var config4 = {
    height: 340,
    appendPadding: 10,
    data: data4,
    legend: false,
    angleField: 'value',
    colorField: 'type',
    radius: 0.5,
    innerRadius: 0.6,
    label: {
      type: 'spider',
      offset: 50,
      labelHeight: 60,
      // offset: '-50%',
      content: '{value}',
      // style: {
      //   textAlign: 'center',
      //   fontSize: 14,
      // },
    },
    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
    // statistic: {
    //   title: false,
    //   content: {
    //     style: {
    //       whiteSpace: 'pre-wrap',
    //       overflow: 'hidden',
    //       textOverflow: 'ellipsis',
    //     },
    //     content: 'AntV\nG2Plot',
    //   },
    // },
  };

  const content = (
    <Row gutter={[24, 24]}>
      <Col span={18}>
        <div style={{backgroundColor: '#1890ff', borderRadius: 5, height: 150 }}>
          <Row>
            <Col span={15}>
              
            </Col>
            {/* <Col span={9}>
              <img height="200px" style={{ position: 'relative', right: 0, bottom: 50 }} src="./undraw_Dev_focus_re_6iwt.svg" alt="" />
            </Col> */}
          </Row>
          {/* <h1 style={{height: 100}}>xixi</h1> */}

        </div>

      </Col>
      <Col span={6}>
        2
      </Col>
    </Row>
  )

  return (
    <PageContainer ghost={true} header={{ title: "Welcome to PickShop" }} style={{ padding: 0 }}>
      <Row gutter={[24, 24]}>
        <Col span={6}>
          <Card bodyStyle={{ textAlign: 'center' }}>
            <ShopCard />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="访问量" value={1343} />
            <TinyArea {...config2} />
            <Divider style={{ margin: 5 }} />
            <span>日访问量</span>
            <span>1243</span>
          </Card>

        </Col>

        <Col span={6}>
          <Card>
            <Statistic title="支付笔数" value={7889} />
            <TinyColumn {...config1} />
            <Divider style={{ margin: 5 }} />
            <span>转化率</span>
            <span>60%</span>
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic title="总销售额" value={112893} />
            <div style={{ marginTop: 38 }}>
              <span>周同比 </span>
              <span>12% </span>
              <span>日同比 </span>
              <span>11% </span>
            </div>

            <Divider style={{ margin: 5 }} />
            <span>日销售额 </span>
            <span>12323 </span>
          </Card>
        </Col>
        <Col span={24}>
          <Card tabList={tabList}>
            <Row gutter={24}>
              <Col span={16}>
                <Card bordered={false} title={'销量趋势'} headStyle={{ borderBottom: 0 }}>
                  <Column {...config} />
                </Card>

              </Col>
              <Col span={8}>
                <Card bordered={false} title={'商品销售额排名'} headStyle={{ borderBottom: 0 }}>
                  <ProductList />
                </Card>

              </Col>
            </Row>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <SearchCard />
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Pie {...config4} />
          </Card>
        </Col>
        <Col span={24}>
          <Card>
            <Line {...config5} />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default App;
